<template>
<div id="app">
    <el-container>
<!--      //头部-->
      <el-header>
        <span id="font_spacal">Manager<span style="color:#912CEE">'s&nbsp;Webside</span> </span>
        <el-dropdown>
          <img class="header_img" :src="imgSrc" alt=""/>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item><i class="el-icon-user"></i>个人信息</el-dropdown-item>
            <el-dropdown-item><i class="el-icon-error"></i>退出登录</el-dropdown-item>

          </el-dropdown-menu>
        </el-dropdown>

      </el-header>


      <el-container>

<!--        //侧边栏-->
        <el-aside width="200px">
          <el-menu  router unique-opened active-text-color="#912CEE">
        <!--  一级菜单-->
            <el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">
<!--              一级菜单模板-->
              <template slot="title">
<!--                图标-->
                <i :class="iconList[item.id]"></i>
<!--                文本-->
                <span>{{item.authName}}</span>
              </template>
<!--              二级菜单-->
              <el-menu-item :index="subItem.path+''" v-for="subItem in item.children" :key="subItem.id">
                <template slot="title">
                  <!--                图标-->
                  <i class="el-icon-tickets"></i>
                  <!--                文本-->
                  <span>{{subItem.authName}}</span>
                </template>
              </el-menu-item>
            </el-submenu>

          </el-menu>
        </el-aside>
<!--        //主体-->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
</div>
</template>

<script>
export default {
data(){
  return{
    imgSrc:require('@/assets/logo1.jpg'),
    menuList:[],
    iconList:{
      '125':'el-icon-s-custom',
      '103':'el-icon-s-check',
      '101':'el-icon-s-goods',
      '102':'el-icon-s-order',
      '145':'el-icon-s-data',
    }
  }
},methods: {
    async getMenuList() {
      const {data: res} = await this.$http.get('menus');
      if (res.meta.status!==200) return this.$message.error('获取菜单列表失败')
      this.menuList=res.data
      console.log(res)
    }
  },
  created() {
  this.getMenuList()
  },

}
</script>

<style lang="less" scoped >
.el-header{
  box-shadow: 0px 0.5px 7px #969696;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
  transition-duration:0.1s;
  transition-timing-function:linear;
  transition-delay:0s;
  transition-property:all;
}
.el-header:hover{
  box-shadow:0px 0.5px 20px	#969696;

}

.el-aside{
  background-color: white;
}
.el-main{
  background-color: whitesmoke;
}
.el-container{
  height: 100vh;

}
.header_img{
  align-items: center;
  border-radius: 50%;
  height: 40px;
  width: 40px;
}
.header_img:hover{
  height: 42px;
  width: 42px;
}
#font_spacal{
  color: black ;
  font-family: "Microsoft Yahei";
  font-size: 30px;
}
.el-submenu__title>span{
  margin-left: 20px;
}
#app{
  opacity: 0;
  animation: bottomBtn 0.5s linear 100ms forwards;
}
@keyframes bottomBtn {
  to{
    opacity: 1;
  }
  from{
    opacity: 0;
  }
}
</style>
